import { useState } from "react";
import { Toast, Dialog, Button } from "antd-mobile";
import { MobileHead } from "../../../components";

const TestMobile:React.FC = () => {
    const [visible, setVisible] = useState(false);

    return <>
        <MobileHead />
        <div>test Mobile</div>
        <Button size="middle" color="primary" onClick={() => setVisible(true)}>show dialog!</Button>
        <Button size="middle" color="default" onClick={() => Toast.show({
            icon: 'success',
            content: 'show toast!'
        })}>show dialog!</Button>
        <Dialog
            visible={visible}
            onClose={() => setVisible(false)}
            title="mobile 提示！"
            content={<div>hello world!</div>}
            closeOnMaskClick
        />
    </>
}

export default TestMobile;